<template>
  <!-- 头部 -->
  <van-nav-bar title="足迹浏览" left-arrow @click-left="goMy" />
  <!-- 遍历数据 -->
  <div v-for="item in list" :key="item.id" @click="goGoodsDetail(item.goodsId)">
    <!-- <div v-for="(item, index) in currentPageData" :key="index"> -->
    <!-- 时间 -->
    <div class="myAddTime">
      {{ item.addTime }}
      <!-- 大盒子 -->
      <div class="bigDiv">
        <!-- 左边盒子 -->
        <div class="leftDiv">
          <!-- 商品图片 -->
          <div class="myPicUrl">
            <img :src="item.picUrl" />
          </div>
        </div>
        <!-- 右边盒子 -->
        <div class="rightDiv">
          <!-- 商品名称 -->
          <div class="myName">
            {{ item.name }}
          </div>

          <!-- 商品内容 -->
          <div class="myBrief">
            {{ item.brief }}
          </div>

          <!-- 商品价钱 -->
          <div class="myPrice">￥{{ item.retailPrice }}</div>
        </div>
        <div class="myDelete">
          <img
            src="../assets/images/删除.png"
            @click.stop="myDelete(item.id)"
          />
        </div>
      </div>
    </div>
    <!-- </div> -->
  </div>
  <div class="content">暂无更多数据</div>
</template>

<script>
import { showToast } from "vant";
import { service } from "../api/config";
export default {
  name: "footprint",
  data() {
    return {
      list: [],
      isShow: true,
    };
  },
  computed: {
    totalPages() {
      //整数取整
      return this.total;
    },
    //展示页面数据
    currentPageData() {
      //开始
      const startIndex = (this.currentPage - 1) * this.pageSize;
      //结束
      const endIndex = startIndex + this.pageSize;
      return this.list.slice(startIndex, endIndex);
    },
  },
  methods: {
    goMy() {
      //返回上一级
      this.$router.push("/my");
    },
    goGoodsDetail(id) {
      this.$store.commit("setValueDetail", id);
      this.$router.push("/shopping");
    },
    myDelete(id) {
      service
        .post("/wx/footprint/delete", {
          id: id,
        })
        .then((res) => {
          console.log(res);
          showToast("删除成功");
          //删除成功后页面刷新
          setTimeout(() => {
            //刷新页面
            window.location.reload();
          }, 500);
        });
    },
  },
  mounted() {
    service.get("/wx/footprint/list").then((res) => {
      console.log(res);
      if (res.data.errmsg == "成功") {
        res.data.data.list.forEach((item) => {
          this.list.push({
            id: item.id,
            addTime: item.addTime,
            brief: item.brief,
            name: item.name,
            retailPrice: item.retailPrice,
            picUrl: item.picUrl,
            goodsId: item.goodsId,
          });
        });
      }
    });
  },
};
</script>

<style scoped>
html {
  font-size: 0.2666vw;
}
.myAddTime {
  padding-left: 1%;
  color: rgb(137, 141, 137);
  background-color: rgb(255, 255, 255, 0.7);
  border: 0.1rem solid rgb(236, 233, 230);
  padding-top: 3%;
  padding-bottom: 3%;
  font-size: 20px;
}

.bigDiv {
  display: flex;
}
.leftDiv {
  flex: 25%; /*两个div同一列占比 */
}
.rightDiv {
  flex: 75%; /*两个div同一列占比 */
  padding-top: 25rem;
}
.myPicUrl > img {
  width: 100rem;
  height: 100rem;
  line-height: 50rem;
  margin-top: 20rem;
}
.myName {
  margin-top: 10rem;
  color: rgb(165, 165, 165);
  font-size: 20px;
}
.myBrief {
  margin-top: 10rem;
  font-size: 15px;
  color: rgb(185, 184, 185);
}

.myPrice {
  margin-top: 10rem;
  color: rgb(82, 82, 82);
}
.myDelete > img {
  width: 25rem;
  height: 25rem;
  margin-top: 40rem;
}
.btnPaging {
  width: 100%;
  text-align: center;
  font-size: 10rem;
  margin-top: 10rem;
}
.content {
  width: 100%;
  text-align: center;
  font-size: 15rem;
}
</style>